<template>
  <div class="demo-inner-divider" >基本使用</div>
  <div>
    <e-avatar icon="usergroup" size="large" />
    <e-avatar icon="a-ShoppingCart" :size="100" />
    <e-avatar icon="usergroup" size="small" />
  </div>
  <div>
    <e-avatar shape="square" icon="usergroup" size="large" />
    <e-avatar shape="square" icon="usergroup" />
    <e-avatar shape="square" icon="usergroup" size="small" />
  </div>

  <div class="demo-inner-divider">
    支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
  </div>
  <div>
    <e-avatar icon="usergroup" />
    <e-avatar custom-icon="x">U</e-avatar>
    <e-avatar>USER</e-avatar>
    <e-avatar src="https://picsum.photos/id/64/300" @on-error="onError" />
    <e-avatar style="color: #f56a00;background-color: #fde3cf">U</e-avatar>
    <e-avatar style="background-color: #87d068" icon="usergroup" />
    <e-avatar src="https://picsum.photos/id/64/300_??" @on-error="onError" />
  </div>

  <div class="demo-inner-divider">与badge结合</div>
  <div>
    <e-badge :count="1">
      <e-avatar shape="square" icon="usergroup" />
    </e-badge>

    <e-badge dot>
      <e-avatar shape="square" icon="usergroup" />
    </e-badge>

  </div>
  <div class="demo-inner-divider">动态改变图标</div>
  <div>
    <e-avatar :style="{background: color}">{{ user }}</e-avatar>
    <e-button size="small" type="primary" @click="handleChange">Change</e-button>
  </div>
  <avatar-md class="markdown-body" />
</template>

<script>
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];

import avatarMd from '../../docs/avatar.md'
export default {
  components:{
    avatarMd
  },
  data () {
    return {
      user: UserList[0],
      color: ColorList[0]
    }
  },
  methods: {
    handleChange () {
      const index = UserList.indexOf(this.user);
      this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
      this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
    },
    onError(e){
      console.log("图片加载失败",e)
    }
  }        
}
</script>

<style>

</style>